var myScroll;
var myScrollConfig = {
    useTransition: false,//iScroll使用CSS transition来实现动画效果（动量和弹力）。如果设置为false，那么将使用requestAnimationFrame代替。
    useTransform: true,//使用csstransform属性
    scrollY: false,
    scrollX: true,
    freeScroll: false,//开始滚动一个方向上的滚动条，另外一个方向上会被锁定不动
    bounce: false,//边界反弹
    momentum: false,//启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
    click: true//应用程序响应click事件，那么该设置次属性为true。
};
var audioDatas=[
    {
        photo: 'm_1.png',
        title: '《狩猎》　安德烈·德兰　布面油画',
        detail: '德兰，野兽派创始人之一。创作风格多变，经历了野兽派、立体主义、非洲艺术、古典主义等几个时期，令批评家们望而生畏。这幅作品《狩猎》创作于1946-1950年中，我们可以看到德兰大面积地平涂了鲜艳的黄色、橙色、绿色，笔触大胆奔放、充满活力，隐约可现的弯曲缠扰的旋涡状图案，暗涌着一股强烈的运动感。',
        audio: '1.mp3'
    },
    {
        photo: 'm_2.png',
        title: '《睡莲（局部）》　克劳德·莫奈　布面油画',
        detail: '莫奈的睡莲，是公认的20世纪最重要的艺术作品，是富有创新性、开辟性的图像，标志着一段崭新的艰难艺术之路的开端，莫奈几乎穷其一生致力于此，成功营造出一幅栩栩如生的水波轻摇、莲花沉浮的景象。这幅画中，多余的细节被悉数抹掉，取而代之的是浓稠的青、绿、赭石颜料，完全专注于水银般的池水本身。',
        audio: '2.mp3'
    },
    {
        photo: 'm_3.png',
        title: '《男人头像》　帕布罗·毕加索　彩色蜡笔纸本',
        detail: '毕加索创作这件《男人头像》时已是78岁高龄，然而他的画作还是如此生动，充斥着脉动的力量、明快的色彩以及大胆的线条。在这本《帕布罗·毕加索的私密世界》的封面上，他标明了准确地日期“59年2月3日”，并签上了名“送给让，他的朋友毕加索”。这些有趣的男人头像，随后成为了毕加索在1960年代至1970年代成形的“火枪手”系列形象中的一部分。',
        audio: '3.mp3'
    }
    ,
    {
        photo: 'm_4.png',
        title: '《雷恩车站大道》　休斯·克劳德·毕沙罗　布面油画',
        detail: '毕沙罗的风景画受到19世纪印象派的影响，在画面中，虽然能够看到他祖父卡米尔·毕沙罗，以及修拉、莫奈等印象派画家的影子，但颜色的运用更加主观，融合了自然光色和主观印象。《雷恩车站大道》描绘了火车站建成之初、城市化刚刚起步的雷恩城景观一隅。',
        audio: '4.mp3'
    },
];

$(function () {
    function loading(){
        setTimeout(function(){   
            $('.process').text("20%");
        },600)
        setTimeout(function(){   
            $('.process').text("50%");
        },1600)
        setTimeout(function(){   
            $('.process').text("80%");
        },3200)
        setTimeout(function(){   
            $('.process').text("100%");
            $("#loading").remove();
        },4000)
    }
    loading();
    function loadEnd() {
        var clientHeight = document.documentElement.clientHeight;//设备可见区域高度
        var clientWidth = document.documentElement.clientWidth;
        var max = 820 * clientHeight / 505 - clientWidth;
        var center = -(max) / 2;

        //适配，缩放来达到全屏
        //判断屏幕尺寸
        $('.home').css({
            '-webkit-transform': 'scale(' + clientHeight / 505 + ')',//在Xy轴缩放
            'width': 820 * clientHeight / 505
        });
        $('.container').css({
            '-webkit-transform': 'scale(' + clientHeight / 505 + ')',
            'width': 3790 * clientHeight / 505
        });

        setTimeout(function () {
            myScroll = new IScroll('#wrapper', myScrollConfig);
            myScroll.scrollTo(center, 0, 300);
        }, 100);

        setTimeout(function () {
            myScroll2 = new IScroll('#art_show', myScrollConfig);
            myScroll2.scrollTo(0, 0, 1);
        }, 1);

        window.addEventListener("devicemotion", function(event) {
            try {
                var acceleration = event.accelerationIncludingGravity;
                var x;
                x = acceleration.x;

                scrollToLeft = -Math.ceil(max * x / 10 + max / 2);
                if (scrollToLeft > 0) {
                    scrollToLeft = 0;
                }
                if(x>1||-1>x)
                myScroll.scrollTo(scrollToLeft, 0, 300);
            }
            catch (e) {
                alert(e)
            }
        }, true);
    }

       loadEnd();
        //进入艺术展
        $('.entry_logo,.home_art1,.home_art2').bind('click', function () {
            $('#wrapper').remove();
            $('.container').show();
            $('#art_show').show();
            //定义艺术展滑动层
            setTimeout(function () {
                myScroll2 = new IScroll('#art_show', myScrollConfig);
                myScroll2.scrollTo(0, 0, 1);
            }, 1);
            //艺术展打开图片详情
            $('.pic').bind('click', function (event) {
                var picNum=event.target.getAttribute('data-id');
                if(picNum<5){
                    var datalist = audioDatas[picNum-1];
                    $("#audio").attr('src','../images/audio/'+datalist.audio);
                    $(".picture").attr('src','../images/audio/'+datalist.photo);
                    $(".audio_title").text(datalist.title);
                    $(".audio_detail").text(datalist.detail);
                }
                $('.show_audio').show();
            });
            //hide图片详情
            $('.closeico').bind('click', function () {
                $('.show_audio').hide();
            });
        });
        /*audio播放*/

        function formatSeconds(value) {
        // 补零
        var zero = function (v) {
            return (v >> 0) < 10 ? "0" + v : v;
        };
        var theTime = parseInt(value);// 秒
        var theTime1 = 0;// 分
        var theTime2 = 0;// 小时
        if (theTime > 60) {
            theTime1 = parseInt(theTime / 60);
            theTime = parseInt(theTime % 60);
            if (theTime1 > 60) {
                theTime2 = parseInt(theTime1 / 60);
                theTime1 = parseInt(theTime1 % 60);
            }
        }
        var result = "" + zero(parseInt(theTime));
        if (theTime1 > 0) {
            result = "" + zero(parseInt(theTime1)) + ":" + result;
        }
        if (theTime2 > 0) {
            result = "" + zero(parseInt(theTime2)) + ":" + result;
        }
        if (theTime1 == 0 && theTime2 == 0) {
            result = '00:' + result;
        }
        return result;
    }

        var audioplay=document.getElementById('audio');
        //获得audio元素
             audioplay.addEventListener('ended', function () {
            var duration = formatSeconds(Math.floor(audioplay.duration));
            if (!isNaN(audioplay.duration)) {
                $('.audio_time').text(duration);
            } else {
                $('.audio_time').text('00:00');
            }
            $(".pause").css('display','none');
            $(".play").css('display','inline-block');
            $(".audio_line").css('background-image','url(../images/audio/audio.png)');

        });

        audioplay.addEventListener('canplay', function () {
            var duration = formatSeconds(Math.floor(audioplay.duration));
            if (!isNaN(audioplay.duration)) {
                $('.audio_time').text(duration);
            } else {
                $('.audio_time').text('00:00');
            }
        });

        audioplay.addEventListener('timeupdate', function (event) {
            var currentTime = event.target.currentTime;

            timeout = setTimeout(function () {
                duration = formatSeconds(Math.floor(audioplay.duration - currentTime));
                if (!isNaN(currentTime)) {
                    $('.audio_time').text(duration);
                } else {
                    $('.audio_time').text('00:00');
                }
            }, 1000)

        });

        $(".play").bind("click",function(){
            $(".play").css('display','none');
            $(".pause").css('display','inline-block');
            $(".audio_line").css('background-image','url(../images/audio/audio.gif)');
            audioplay.play();
        });
        /*audio暂停*/
        $(".pause").bind("click",function(){
            $(".pause").css('display','none');
            $(".play").css('display','inline-block');
            $(".audio_line").css('background-image','url(../images/audio/audio.png)');
            audioplay.pause();
        });
        
})